<template>
  <view class="svg-icon">
    <view :style="{
      mask: `url(/static/icons/svg/${iconClass}.svg)`,
      '-webkit-mask': `url(/static/icons/svg/${iconClass}.svg)`,
      'font-size': (parseInt(size)-7)+'px'
      }"></view>
  </view>
</template>

<script>
  export default{
    name: 'svg-icon',
    emits: ['click'],
    props: {
      iconClass: {
        type: String,
        required: true,
        default: ''
      },
      size: {
        type: String,
        required: false,
        default: '30'
      }
    }
  }
</script>

<style scoped>
  .svg-icon {
    padding: 3.5px;
  }
  .svg-icon>view{
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    font-size: 20px;
  }
</style>